<template>
  <div
    class="home-box flex-row"
    v-loading="isLoading"
    element-loading-text="拼命加载中"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <div class="left-box flex-column">
      <div class="pic-box flex-hv-center">没有签名</div>
      <div class="blog-type-box">
        <blog-type
          v-if="blogTypes.length > 0"
          :blogTypes="blogTypes"
          @changeBlogType="changeBlogType"
        />
      </div>
      <div class="record-box flex-hv-center">
        <el-button size="small" type="primary" @click="goAdmin">后台</el-button>
      </div>
    </div>

    <div class="right-box flex-column">
      <div
        class="blog-tag-box"
        v-if="this.$router.currentRoute.name === 'home'"
      >
        <blog-tag
          v-if="blogTags.length > 0"
          :blogTags="blogTags"
          @changeBlogTag="changeBlogTag"
        />
      </div>
      <div id="blogBox">
        <blog-list
          v-if="this.$router.currentRoute.name === 'home'"
          :blogs="blogs"
          @goBlog="goBlog"
        />
        <router-view></router-view>
      </div>

      <div
        class="footer-box pf flex-row"
        v-if="this.$router.currentRoute.name === 'home'"
      >
        <div class="search-box">
          <el-input
            @keyup.enter.native="search"
            placeholder="请输入检索内容"
            v-model="searchInfo"
          >
            <i
              slot="prefix"
              class="cp el-input__icon el-icon-search"
              @click="search"
            ></i>
          </el-input>
        </div>
        <div class="page-box">
          <blog-page :pageInfo="pageInfo" @changePage="changePage" />
        </div>
      </div>

      <div class="record-box pf flex-row flex-h-center flex-v-center">
        <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备16042573号</a>
      </div>
    </div>

    <admin-modal v-if="isShowAdmin" @closeAdminModal="closeAdminModal" />
  </div>
</template>

<script>
import BlogType from './components/BlogType'
import BlogTag from './components/BlogTag'
import BlogList from './components/BlogList'
import BlogPage from './components/BlogPage'
import AdminModal from './components/AdminModal'
import httpUtil from '@utils/HttpUtil'

export default {
  name: 'Home',
  components: { BlogType, BlogTag, BlogList, BlogPage, AdminModal },
  data() {
    return {
      isLoading: false,
      isShowAdmin: false,
      searchInfo: '',
      blogTypes: [],
      blogTags: [],
      blogs: [],
      activeBlogTypeId: '',
      activeBlogTagId: '',
      pageInfo: {
        total: 0,
        size: 10,
        current: 1
      },
      blog: {}
    }
  },
  mounted() {
    const width = window.screen.width
    const height = window.screen.height
    if (width === 1920 && height === 1080) {

    } else {
      this.$message({
        type: 'warning',
        message: '只适配1920*1080分辨率,在其他分辨率屏幕上,局部和样式有丢失'
      })
    }
    if (!this.isWebKit()) {
      this.$message({
        type: 'warning',
        message: '请使用现在浏览器访问,比如谷歌,edge浏览器'
      })
      return
    }
    this.getBlogTypes()
    // this.testGError()
  },
  methods: {
    isWebKit() {
      return navigator.userAgent.indexOf('WebKit') > -1
    },
    // testGError() {
    //   const a = null
    //   console.log(a.length)
    // },
    // 进入后台弹窗
    goAdmin() {
      this.$prompt('请输入口令', '后台提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          inputValidator: value => {
            if (!value) {
                 return '输入不能为空'
             }
          },
          beforeClose: (action, instance, done) => {
            if (action !== 'confirm') {
              done()
              return
            }
            const value = instance.inputValue
            const url = this.$ServerIP + `/api/blogs/checkAdmin/${value}`
            httpUtil.get(url).then(json => {
              const { status, msg } = json
              if (status === 0) {
                this.$message({
                  type: 'error',
                  message: msg
                })
                } else {
                  done()
                  this.isShowAdmin = true
                }
              })
          }
        })
    },
    closeAdminModal() {
      this.isShowAdmin = false
    },
    // 进入博客内容页面
    goBlog(id) {
      this.$router.push({ path: `blog/${id}` })
    },
    // 获取博客分类
    async getBlogTypes() {
      this.isLoading = true
      const url = this.$ServerIP + '/api/blogTypes'
      const json = await httpUtil.get(url)
      const { dataset: blogTypes } = json
      for (let i = 0; i < blogTypes.length; i++) {
        i === 0 ? blogTypes[i].isSelect = true : blogTypes[i].isSelect = false
      }
      this.blogTypes = blogTypes
      this.activeBlogTypeId = blogTypes[0].id
      this.getBlogsByTypeId(parseInt(this.activeBlogTypeId))
      this.getBlogTagsByTypeId(parseInt(this.activeBlogTypeId))
    },
    // 根据一个分类Id获取博客标签列表
    async getBlogTagsByTypeId(typeId) {
      this.isLoading = true
      const url = this.$ServerIP + `/api/blogTags/${typeId}`
      const json = await httpUtil.get(url)
      const { dataset: blogTags } = json
      console.log('blogTags', blogTags)
      if (!Array.isArray(blogTags)) return
      blogTags.map(item => {
        item.isSelect = false
        return item
      })
      this.blogTags = blogTags
      this.isLoading = false
    },
    // 根据一个分类Id获取博客列表
    async getBlogsByTypeId(typeId) {
      this.isLoading = true
      const url = this.$ServerIP + '/api/blogs/getBlogs'
      const { size, current } = this.pageInfo
      const params = {
              pageSize: size,
              currentPage: current,
              typeId
            }
      const json = await httpUtil.post(url, params)
      const { dataset } = json
      const { blogs, pageTotal } = dataset
      this.pageInfo.total = pageTotal
      this.blogs = blogs
      this.isLoading = false
    },
    // 根据一个分类Id和一个标签Id获取博客列表
    async getBlogsByTypeIdAndTagId(typeId, tagId) {
      this.isLoading = true
      const url = this.$ServerIP + '/api/blogs/getBlogs'
      const { size, current } = this.pageInfo
      const params = {
              pageSize: size,
              currentPage: current,
              typeId,
              tagId
            }
      const json = await httpUtil.post(url, params)
      const { dataset } = json
      const { blogs, pageTotal } = dataset
      this.pageInfo.total = pageTotal
      this.blogs = blogs
      this.isLoading = false
    },
    // 点击博客分类切换
    changeBlogType(id) {
      this.blogTypes.map(item => {
          if (item.isSelect) item.isSelect = false
          return item
      })
      this.blogTypes.map(item => {
        if (item.id === id) {
          item.isSelect = true
        }
        return item
      })
      this.activeBlogTypeId = id
      this.pageInfo.current = 1
      this.getBlogsByTypeId(parseInt(this.activeBlogTypeId))
      this.getBlogTagsByTypeId(parseInt(this.activeBlogTypeId))
      if (this.$router.currentRoute.name !== 'home') {
        this.$router.push({ name: 'home' })
      }
    },
    // 点击博客标签切换
    changeBlogTag(id) {
      this.blogTags = this.blogTags.map(item => {
        if (item.id === id) {
          item.isSelect = true
        } else {
          item.isSelect = false
        }
        return item
      })
      this.activeBlogTagId = id
      this.getBlogsByTypeIdAndTagId(parseInt(this.activeBlogTypeId), parseInt(this.activeBlogTagId))
    },
    changePage(type) {
      const { current, total, size } = this.pageInfo
      const { activeBlogTypeId } = this
      if (type === 'left') { // 向前翻页
        if (current === 1) return
        this.pageInfo.current = current - 1
      } else { // 向后翻页
        if (current === Math.ceil(total / size)) return
        this.pageInfo.current = current + 1
      }
      this.getBlogsByTypeId(activeBlogTypeId)
    },
    search() {
      const searchInfo = this.searchInfo.trim()
      if (!searchInfo) {
        this.$message({
          message: '检索内容不能为空',
          type: 'error'
        })
        return
      }
      if (searchInfo.length < 2) {
        this.$message({
          message: '检索内容必须大于2个字符',
          type: 'error'
        })
        return
      }
      this.isLoading = true
      const url = this.$ServerIP + `/api/blogs/search/${searchInfo}`
      httpUtil.get(url).then(json => {
        const { dataset } = json
        this.blogs = dataset
        this.pageInfo.total = this.blogs.length
      }).finally(() => {
         this.isLoading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
.home-box {
  width: 100%;
  .left-box {
    width: 10%;
    height: 100vh;
    // position: fixed;
    // top: 0;
    // left: 0;
    border-right: 1px solid #eee;
    .pic-box {
      height: 10%;
    }
    .blog-type-box {
      height: 80%;
    }
  }
  .right-box {
    // position: fixed;
    // top: 0;
    // right: 0;
    width: 90%;
    height: 100vh;
    .blog-tag-box {
      height: 60px;
    }
    .blog-box {
      margin-top: 4px;
    }
    .footer-box {
      bottom: 40px;
      left: 10%;
      right: 0;
      height: 60px;
      line-height: 60px;
      border-top: 1px solid #eee;
      .search-box {
        width: 80%;
        padding: 0 20px;
        /deep/.el-input__icon {
          &:hover {
            color: #3593f2;
          }
        }
      }
      .page-box {
        width: 20%;
      }
    }
    .record-box{
      bottom: 0;
      left: 10%;
      right: 0;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
